<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'科目详情'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "137">
        <div class="analyItem">
            <p class="analyItemTit tx-center">科目详情</p>
            <div class="analyItemCon">
                <div class="clearfix">
                    <rx-viewer  class="fl ml10"  v-if="subjectDetail.standardImgurl !== null" >
                        <div class="clearfix">
                            <div class="fl">
                                <img :src="subjectDetail.img | smallImg(60, 60)" >
                            </div>
                        </div>
                    </rx-viewer>
                    <rx-upload
                        v-if="isEdit"
                        class="fl ml10"
                        :data="{id: subjectDetail.id}" :init="{class: 1, mime: 1}"
                        :elStyle="{width:'70px', height: '60px'}"
                        @success="successUpload">
                        <div class="fl uiImgUpload uiImgUpload-gblock mr10">
                            <a href="javascript:">
                                <span type="file" value="" class="file"></span>
                                <em class="bgIcon file-ico"></em>
                            </a>
                        </div>
                    </rx-upload>
                </div>
                <div class="col-md-12">
                    <p class="col-md-6 mt10">
                        <span class="cLightGray pr8">名称</span>
                        <span v-if="!isEdit">{{subjectDetail.name }}</span>
                        <el-input v-model="subjectDetail.name"  class="width150" placeholder="请输入名称" v-else></el-input>
                    </p>
                </div>
                <div  class="col-md-11" >
                    <p class="cLightGray">商品描述</p>
                     <rx-editor
                        v-model="content"
                        :elStyle="{height: '400px',width: '100%'}"
                        :init="{class: 1, mime: 1}"
                        :options="{}">
                    </rx-editor>
                </div>
                <diV v-if="!isEdit" class="operButton">
                    <el-button type="primary" icon="el-icon-edit" circle @click="isEdit = true"></el-button>
                </diV>
                <diV v-else  class="operButton">
                    <el-button type="warning" icon="el-icon-close" circle @click="isEdit = false"></el-button>
                    <el-button type="success" icon="el-icon-check" circle @click="updateSubject()"></el-button>
                </diV>
            </div>
        </div>
    </div>
    <div class="layerRtb-footer">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <p class="fl col-md-9"></p>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import { Base64 } from 'js-base64'
import rxEditor from '@rx/packages/editor/Index'
import { mapMutations, mapGetters } from 'vuex'
import { getSubjectById, updateSubject } from '../../Resources/Api/index'
export default {
    components: {
        rxEditor
    },
    data () {
        return {
            content: '', // 编辑内容
            isEdit: false, // 是否编辑
            data: [],
            delFlag: '', // 状态
            id: '',
            subjectDetail: {}
        }
    },
    created () {
        this.getSubjectById()
    },
    computed: {
        ...mapGetters(['leftInfo', 'twoToThreeInfo', 'userInfo'])
    },
    methods: {
        ...mapMutations({
            setUpDatePlate: `SET_UPDATE_PLATE`
        }),
        // 路由跳转路径拼接
        routerPath (path) {
            return this.$route.matched[1].path + '/' + path
        },
        // 直接进行路由跳转路径
        routerPush (path) {
            this.$router.push(this.$route.matched[1].path + '/' + path)
        },
        // 图片上传
        successUpload (value) {
            this.subjectDetail.img = value.src
        },
        // 查询科目详情
        getSubjectById () {
            let params = {
                id: this.leftInfo.id
            }
            // 查询服务项科目
            getSubjectById(params).then(results => {
                if (results.data.StatusCode === 1) {
                    this.subjectDetail = results.data.Body.subjectEntity
                    this.content = Base64.decode(this.subjectDetail.text)
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 修改服务项科目
        updateSubject () {
            let params = {
                subject: {
                    id: this.leftInfo.id,
                    img: this.subjectDetail.img,
                    name: this.subjectDetail.name,
                    text: Base64.encode(this.content)
                }
            }
            // 查询服务项科目
            updateSubject(params).then(results => {
                if (results.data.StatusCode === 1) {
                    this.setUpDatePlate()
                    // this.getSubjectById()
                    // this.isEdit = true
                }
            }).catch(error => {
                console.log(error)
            })
        }
    },
    watch: {
        leftInfo () {
            this.getItemById()
        }
    }
}
</script>
<style lang="scss">
    .operButton .el-button+.el-button {
        margin-left: 0px
    }
    .operButton {
        position:absolute;
        top: 50%;
        right: 10px;
        transform:translateY(-50%);
    }
    .width150{
        width: 150px;
    }
</style>
